<template>
  <div class="TotalBox">
    <div class="filterBtn add_btn_top">
      <div class="switch-text" :style="{ color: switchTextColor }">
        {{ switchText }}
      </div>
      <el-switch
        class="switchBtn"
        style="display: block"
        active-color="#2680D2"
        @change="clickSwitch"
        v-model="filter"
      >
      </el-switch>
    </div>

    <div class="deviceAssignments">
      <div style="width: 100%" class="con_left">
        <div v-init-screen-h>
          <div v-if="assignmentsDatas && assignmentsDatas.length > 0">
            <ActivationTable
              v-for="assignment in assignmentsDatas"
              :key="assignment.id"
              :assignment="assignment"
              @click="toAssignmentsDetails(assignment.token)"
            ></ActivationTable>
          </div>
          <empty-data v-else></empty-data>
        </div>
        <Pagination
          @pagination="pagination"
          :total="total"
          :page.sync="pageNum"
          :limit.sync="pageSize"
          :pageSizes.sync="pageSizes"
        />
      </div>
      <!-- 右侧展开栏 -->
      <div class="rightColumn" v-show="showColumn">
        <!-- 搜索框 -->
        <div>
          <el-input
            v-model="SearchContent"
            @change="searchBlur"
            @clear="searchBlur"
            size="mini"
            placeholder="输入关键字搜索"
            :suffix-icon="SearchContent != '' ? '' : 'el-icon-search'"
            clearable
          ></el-input>
        </div>

        <el-collapse v-model="activeNames" v-init-screen-h="230">
          <!-- 设备类型 -->
          <el-collapse-item title="设备类型" name="1">
            <el-checkbox-group
              class="messageGroup"
              v-model="deviceTypeSelects"
              v-if="deviceTypeSearchList && deviceTypeSearchList.length !== 0"
            >
              <div class="messageList label_hidden">
                <el-checkbox
                  class="messageBox"
                  :label="deviceType.token"
                  v-for="deviceType in deviceTypeSearchList"
                  :key="deviceType.token"
                >
                  <!-- | filtersFileUrl() -->
                  <img
                    class="picture"
                    height="23"
                    width="23"
                    v-if="deviceType.imageUrl"
                    :src="deviceType.imageUrl | filtersFileUrl()"
                    alt=""
                  />
                  <img
                    v-else
                    class="picture"
                    height="23"
                    width="23"
                    src="../../../assets/images/comm/empty.png"
                    alt=""
                  />
                  <div class="allName" :title="deviceType.name">
                    {{ deviceType.name }}
                  </div>
                </el-checkbox>
              </div>
            </el-checkbox-group>
            <div class="nodata" v-else>暂无</div>
          </el-collapse-item>
          <!-- 用户 -->
          <el-collapse-item title="用户" name="2">
            <el-checkbox-group
              class="messageGroup"
              v-model="customerSelects"
              v-if="customersSearchList && customersSearchList.length !== 0"
            >
              <div class="messageList label_hidden">
                <el-checkbox
                  :label="customer.id"
                  class="messageBox"
                  v-for="customer in customersSearchList"
                  :key="customer.id"
                >
                  <!-- filtersFileUrl() -->
                  <img
                    class="picture"
                    height="23"
                    width="23"
                    v-if="customer.url"
                    :src="customer.url | filtersFileUrl()"
                    alt=""
                  />
                  <img
                    v-else
                    class="picture"
                    height="23"
                    width="23"
                    src="../../../assets/images/comm/empty.png"
                    alt=""
                  />

                  <div class="allName" :title="customer.name">
                    {{ customer.name }}
                  </div>
                </el-checkbox>
              </div>
            </el-checkbox-group>
            <div class="nodata" v-else>暂无</div>
          </el-collapse-item>
          <!-- 站点 -->
          <el-collapse-item title="站点" name="3">
            <el-checkbox-group
              class="messageGroup"
              v-model="areaSelects"
              v-if="areasSearchList && areasSearchList.length !== 0"
            >
              <div class="messageList label_hidden">
                <el-checkbox
                  :label="area.token"
                  class="messageBox"
                  v-for="area in areasSearchList"
                  :key="area.token"
                >
                  <img
                    class="picture"
                    height="23"
                    width="23"
                    v-if="area.imageUrl"
                    :src="area.imageUrl | filtersFileUrl()"
                    alt=""
                  />
                  <img
                    v-else
                    class="picture"
                    height="23"
                    width="23"
                    src="../../../assets/images/comm/empty.png"
                    alt=""
                  />

                  <div class="allName" :title="area.name">
                    {{ area.name }}
                  </div></el-checkbox
                >
              </div>
            </el-checkbox-group>
            <div class="nodata" v-else>暂无</div>
          </el-collapse-item>
          <!-- 网关 -->
          <el-collapse-item title="网关" name="4">
            <el-checkbox-group
              class="messageGroup"
              v-model="assetSelects"
              v-if="assetsSearchList && assetsSearchList.length !== 0"
            >
              <div class="messageList label_hidden">
                <el-checkbox
                  class="messageBox"
                  v-for="asset in assetsSearchList"
                  :key="asset.token"
                  :label="asset.token"
                >
                  <img
                    class="picture"
                    height="23"
                    width="23"
                    v-if="asset.imageUrl"
                    :src="asset.imageUrl | filtersFileUrl()"
                    alt=""
                  />
                  <img
                    v-else
                    class="picture"
                    height="23"
                    width="23"
                    src="../../../assets/images/comm/empty.png"
                    alt=""
                  />

                  <div class="allName" :title="asset.name">
                    {{ asset.name }}
                  </div>
                </el-checkbox>
              </div>
            </el-checkbox-group>
            <div class="nodata" v-else>暂无</div>
          </el-collapse-item>
          <!-- 状态 -->
          <el-collapse-item title="状态" name="5" class="label_hidden">
            <el-checkbox-group class="messageGroup" v-model="statusSelects">
              <el-checkbox class="messageBox" label="Active">
                <svg-icon class="stateSvg" icon-class="activate"></svg-icon>
                <div class="activate">激活</div>
              </el-checkbox>
              <el-checkbox class="messageBox" label="Released">
                <svg-icon class="stateSvg" icon-class="release"></svg-icon>
                <div class="release1">释放</div>
              </el-checkbox>
              <el-checkbox class="messageBox" label="Missing">
                <svg-icon class="stateSvg" icon-class="defect"></svg-icon>
                <div class="defect">缺失</div>
              </el-checkbox>
            </el-checkbox-group>
          </el-collapse-item>
        </el-collapse>

        <div class="btn">
          <el-button class="reset" size="mini" style="width: 50%" @click="reSet"
            >重置</el-button
          >
          <el-button
            class="submit"
            size="mini"
            style="width: 50%"
            type="primary"
            @click="submitBut"
            >提交</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "../../../assets/style/dsplayFilter.css";
import ActivationTable from "@/components/ActivationTable";
import {
  formatBorder,
  formatIclass,
  formatTextcolor,
  formatText,
  formatArrow,
  formatWatches,
} from "@/views/common/js/device/assignments.js";
import { formatTime } from "@/views/common/js/utils.js";
import Pagination from "@/views/common/page";
import emptyData from "@/views/common/emptyData";
import { getUserList } from "@/api/userAuth";
import { getDeviceTypes } from "@/api/deviceType";
import { getAssetsList } from "@/api/assets";
import { getAssignmentSearchList } from "@/api/assignments";
import { getAreas } from "@/api/superlinkAreat";
export default {
  components: {
    Pagination,
    ActivationTable,
    emptyData,
  },
  data() {
    return {
      pageNum: 1,
      pageSize: 20,
      pageSizes: [20, 50, 100, 300],
      total: 0,
      filter: false,
      switchTextColor: "#666666",
      switchText: "显示筛选",
      assignmentsDatas: [],
      showColumn: false,
      activeNames: [],
      SearchContent: "", //搜索内容
      deviceTypeList: [],
      customersList: [],
      areasList: [],
      assetsList: [],
      deviceTypeSearchList: [],
      customersSearchList: [],
      areasSearchList: [],
      assetsSearchList: [],
      deviceTypeSelects: [],
      customerSelects: [],
      areaSelects: [],
      assetSelects: [],
      statusSelects: [],
    };
  },
  mounted() {
    this.assignmentsDatas = null;
    this.getAssignmentList();
    this.getDeviceTypeList();
    this.getCustomersList();
    this.getAreasList();
    this.getAssetsList();
  },
  methods: {
    formatDateT(date) {
      return formatTime(date);
    },
    formatBorder(status) {
      return formatBorder(status);
    },
    formatIclass(status) {
      return formatIclass(status);
    },
    formatTextcolor(status) {
      return formatTextcolor(status);
    },
    formatText(status) {
      return formatText(status);
    },
    formatArrow(status) {
      return formatArrow(status);
    },
    formatWatches(status) {
      return formatWatches(status);
    },
    formatStaeColor(status) {
      if (status === "Active") {
        return "#F1F5EF";
      } else if (status === "Missing") {
        return "#FBF2F2";
      } else {
        return "#F2F2F2";
      }
    },
    // 跳转详情
    toAssignmentsDetails(token) {
      this.$router.push({
        path: "deviceAssignmentsDetails",
        query: { assignmentsToken: token },
      });
    },

    //分页回调
    pagination({ page, limit }) {
      this.pageNum = page;
      this.pageSize = limit;
      this.getAssignmentList();
    },
    //获取分配列表
    async getAssignmentList() {
      var that = this;
      // that.loading = true;
      var urldata =
        "includeArea=true&includeAsset=true&includeCustomer=false&includeDevice=true&includeVoiceBox=true&" +
        "page=" +
        that.pageNum +
        "&pageSize=" +
        that.pageSize +
        "&userIds=" +
        that.customerSelects.join(",");
      var params = {
        areaTokens: that.areaSelects,
        assetTokens: that.assetSelects,
        // customerTokens: that.customerSelects,
        deviceTypeTokens: that.deviceTypeSelects,
        assignmentStatuses: that.statusSelects,
      };
      getAssignmentSearchList(params, urldata).then((res) => {
        const { data } = res;
        that.total = data.numResults;
        that.assignmentsDatas = data.results.map((item) => {
          return {
            ...item.ideviceAssignment,
            ...item.user,
          };
        });
        if (
          that.areaSelects.length > 0 ||
          that.assetSelects.length > 0 ||
          that.customerSelects.length > 0 ||
          that.deviceTypeSelects.length > 0 ||
          that.statusSelects.length > 0
        ) {
          that.switchTextColor = "#2680D2";
          that.switchText = "显示筛选 ( 已筛选 )";
        } else {
          that.switchTextColor = "#666666";
          that.switchText = "显示筛选";
        }
      });
    },
    //获取设备类型列表
    getDeviceTypeList() {
      getDeviceTypes().then((res) => {
        this.deviceTypeList = res.data.results;
        this.deviceTypeSearchList = res.data.results;
      });
    },
    //获取用户列表
    getCustomersList() {
      getUserList().then((res) => {
        this.customersList = res.data.data.map((item) => {
          return {
            ...item,
            name: item.username,
          };
        });
        this.customersSearchList = res.data.data.map((item) => {
          return {
            ...item,
            name: item.username,
          };
        });
      });
    },
    //获取站点列表
    getAreasList() {
      var params = {
        includeAreaType: false,
        includeAssignments: false,
        includeZones: false,
        rootOnly: false,
        page: 1,
        pageSize: 0,
      };
      getAreas(params).then((res) => {
        const { data } = res;
        this.areasList = data.results;
        this.areasSearchList = data.results;
      });
    },
    //获取网关列表
    getAssetsList() {
      var params = { includeAssetType: false, page: 1, pageSize: 0 };
      getAssetsList(params).then((res) => {
        const { data } = res;
        this.assetsList = data.results;
        this.assetsSearchList = data.results;
      });
    },
    // switch切换显隐
    clickSwitch(data) {
      if (data == true) {
        this.showColumn = true;
      } else if (data == false) {
        this.showColumn = false;
      }
    },
    //重置
    reSet() {
      this.areaSelects = [];
      this.assetSelects = [];
      this.customerSelects = [];
      this.deviceTypeSelects = [];
      this.statusSelects = [];
      this.getAssignmentList();
    },
    //提交
    submitBut() {
      this.getAssignmentList();
    },
    //筛选搜索
    searchBlur() {
      this.deviceTypeSearchList = this.searchfilter(
        this.SearchContent,
        this.deviceTypeList
      );
      this.customersSearchList = this.searchfilter(
        this.SearchContent,
        this.customersList
      );
      this.areasSearchList = this.searchfilter(
        this.SearchContent,
        this.areasList
      );
      this.assetsSearchList = this.searchfilter(
        this.SearchContent,
        this.assetsList
      );
      this.activeNames = [];
      if (this.deviceTypeSearchList.length > 0) {
        this.activeNames.push("1");
      }
      if (this.customersSearchList.length > 0) {
        this.activeNames.push("2");
      }
      if (this.areasSearchList.length > 0) {
        this.activeNames.push("3");
      }
      if (this.assetsSearchList.length > 0) {
        this.activeNames.push("4");
      }
    },
    searchfilter(filterData, listData) {
      return listData.filter(
        (data) =>
          !filterData ||
          data.name.toLowerCase().includes(filterData.toLowerCase())
      );
    },
  },
};
</script>

<style lang='scss' scoped>
@import "~@/assets/style/deviceCss/deviceAssignment.css";
@import "~@/styles/mixin.scss";
.label_hidden {
  .picture {
    margin-right: 10px;
  }
  /deep/ .el-checkbox__label {
    /* display: none; */
    display: flex;
    align-items: center;
  }
}
.my_box_bg {
  width: 100%;
  background-color: #fff;
  padding: 2px 0 0 3px;
}
.deviceAssignments {
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  .con_left {
    background-color: #fff;
    padding: 20px;
    padding-bottom: 0;

    width: 100%;
  }
}
.rightColumn {
  margin-left: 10px;
  width: 400px;
  background-color: #fff;
  overflow-x: hidden;
  padding: 10px;
  .nodata {
    text-align: center;
    color: #999;
  }
}
.ass {
  width: 100%;
  height: calc(100vh - 150px - 46px) !important ;
  flex-wrap: wrap;
  overflow: auto;
  background-color: #fff;
}
.ass::-webkit-scrollbar {
  display: none;
}
.TotalBox .filterBtn {
  position: absolute;
  top: -40px;
  right: 0;
}
.switch-text {
  float: left;
  margin-right: 8px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 22px;
}
.switchBtn {
  float: left;
}
</style>
